<template>
  <nav>
    <ul>
      <!-- <router-link tag="li" :to="{ name: 'nowplaying' }" active-class="active"> -->
   
      <router-link tag="li"  to="/city">
     
        <span class="name" :v-model="id" ref="name" @click="gocity">{{
          
        }}</span>
        <i class="iconfont icon-f11"></i>
    
     </router-link>
      <!-- </router-link> -->
      <router-link tag="li" :to="{ name: 'nowplaying' }" active-class="active">
        <span>热映</span>
      </router-link>
      <router-link tag="li" :to="{ name: 'cinema' }" active-class="active">
        <span>影院</span>
      </router-link>
      <router-link tag="li" :to="{ name: 'comingsoon' }" active-class="active">
        <span>待映</span>
      </router-link>
      <router-link
        tag="li"
        :to="{ name: 'classicalmovie' }"
        active-class="active"
      >
        <span>经典电影</span>
      </router-link>

      <router-link tag="li" to="/search">
        <li>
          <span class="iconfont icon-fangdajing"></span>
        </li>
      </router-link>
    </ul>
  </nav>
</template>
<script>
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      id:""
    };
  },
  methods: {
    gocity() {
      this.$router.push({ path: "/city" });
    },
  },
  mounted() {
    let name = sessionStorage.getItem("city");
    this.$refs.name.innerHTML = name;
  },
};
</script>
<style lang="scss" scoped>
.name{
  width: 50px;
}
nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  background: #fff;
  z-index: 1;
  ul {
    display: flex;
    text-align: center;
    li {
      flex: 1;
      display: flex;
      justify-content: center;
      i {
        font-size: 12px;
        color: #000;
      }
      span {
        color: #666;
        font-size: 12px;
        font-weight: 700;
      }

      &.active {
        span {
          width: 100%;
          border-bottom: 2px solid #e54847;
          display: block;
          color: #000;
          font-size: 15px;
          font-weight: 900;
        }
      }
    }
  }
  .icon-fangdajing {
    color: #e54847;
    font-size: 18px;
  }
}
</style>
